<template>
    <div class="page">
        <swiper-list :swiperData="swiperData"></swiper-list>
        <div class="container">
            <div class="row">
                <swiper id="home-scroll" :options="swiperOption">
                    <swiper-slide v-for="(item,index) in scrollData" :key="index" :style="{backgroundImage:'url('+item.image_path+')'}">
                        <router-link :to="'/special/'+jumpUrl(item.title)"></router-link>
                        <div class="copy-text">
                            <h3 v-text="item.title"></h3>
                            <div v-text="item.subTitle" v-if="item.subTitle" class="subtitle"></div>
                            <div v-html="item.btnText+' &gt;'" class="link"></div>
                        </div>
                    </swiper-slide>
                </swiper>
                <div class="swiper-pagination2"></div>
            </div>
        </div>
    </div>
</template>
<script>
import api from '../http'
import mixin from '../mixin'
import swiperList from '../components/Home/HomeSwiper'
export default {
    mixins: [mixin],
    data() {
        return {
            swiperData: [],
            scrollData: [],
            swiperOption: { //焦点图配置
                pagination: ".swiper-pagination2",
                autoplayDisableOnInteraction: false,
                slidesPerView: 3,
                slidesPerGroup: 3,
                spaceBetween: 38,
                simulateTouch: false,
                breakpoints: {
                    599: {
                        slidesPerView: 1,
                        slidesPerGroup: 1,
                        spaceBetween: 0,
                    }
                }
            }
        }
    },
    components: {
        swiperList
    },
    mounted() {
        api.GetHome().then(response => {
            this.swiperData = response.data.swiperData
            this.scrollData = response.data.scrollData
        })
    }
}
</script>
<style>
#home-scroll {
    width: 100%;
    margin-bottom: 10px;
}

#home-scroll .swiper-slide {
    height: 264px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
}

#home-scroll .copy-text {
    position: absolute;
    top: 50%;
    left: 50;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    color: #fff;
}

#home-scroll a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.swiper-pagination2 {
    width: 95%;
    margin: 0 auto 25px;
    text-align: center
}

.swiper-pagination2 .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 3px;
    background: #AAAAAA;
    opacity: 1;
}

.swiper-pagination2 .swiper-pagination-bullet-active {
    background: #A71A1A;
}

@media (min-width: 600px) {
    .swiper-pagination2 {
        display: none;
    }
}

@media (min-width: 768px) {
    #home-scroll {
        margin-bottom: 20px;
    }
}
</style>